<template>
  <div id="ServiceSupport">
    <!-- 头部 -->
    <div class="header">
      <Headers></Headers>
    </div>
    <div class="concent">
      <div class="concent_img">
        <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/1/1673947444532%E5%B8%AE%E5%8A%A9%E4%B8%AD%E5%BF%83.png" alt="" style="width:100%">
      </div>
      <div>
        <div>
          <div class="concent_title" style="text-align: center;margin: 0 auto;">
            单号查询
          </div>
          <div style="display:flex;width: 100%;margin: 0 auto;">
            <div class="boxstyle">
              <div class="box01">
                <input type="text" v-model="value" placeholder="请输入订单号">
                <van-icon name="close" class="icon-name iconstyle" @click.stop="replacement()" v-if="value != ''" />
                <div class="button_style">
                  <van-icon name="search" class="icon-name" @click="queryList()" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="min-height:30rem;padding: 1rem;width: 90%;margin: 0 auto;">
          <van-steps direction="vertical" :active="activelength">
            <van-step style="min-height:6rem;font-size:1.2rem;" v-for="(item,index) in activeties" :key="index">
              <h3 style="min-height:2rem;margin: 1rem 0rem 0rem 0rem;line-height:2rem">{{ item.context }}</h3>
              <p style="min-height:2rem;margin-top:1rem">{{ item.time }}</p>
            </van-step>
          </van-steps>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>
  <script>
import { ref } from "vue"

import Headers from "../components/headers.vue"
import Footer from "../components/footer.vue"
import md5 from 'js-md5'
import axios from "axios"
import qs from "qs"
export default {
  name: "ServiceSupport",
  setup() {
    const value = ref('');
    const activeties = []
    const activelength = ref('0')
    return { value, activeties, activelength };
  },
  components: {
    Headers,
    Footer
  },
  methods: {
    queryList() {
      const secret = "C3BAAC9C9923F5070F1B6128EBE89B6E"
      const key = "BE8379FE0525FDED018B59D2AE330781"
      const allwaybill = key + this.value + secret
      const param = {
        key: key,
        num: this.value,
        sign: md5(allwaybill).toUpperCase(),
      }
      axios({
        url: "https://tmsapi.dushisc.com/open_trace/logistics/kd100",
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        data: qs.stringify(param)
      }).then(res => {
        this.activeties = res.data.data.reverse ()
        this.activelength = this.activeties.length
      })

    },
    replacement() {
      console.log("函数调用")
      this.value = ""
      this.queryList()
    }
  },
  mounted(){
    if (this.$route.query.orderNumber != undefined) {
      if (this.$route.query.orderNumber != "") {
        this.value = this.$route.query.orderNumber
        this.queryList()
      }
      else {
        this.value = ""
      }
    } else {
      this.value = ""
    }
    
  }
}
  </script>
  <style scoped>
.concent_title {
  padding: 2rem 0rem 1.5rem 0rem;
}

.footer{
  margin: 2rem 0rem 0rem 0rem;
  background: black;
  padding: 1rem 0rem 0.1rem 0rem;
}
.VanSearch /deep/ .van-icon {
  font-size: 1.2rem;
}
.boxstyle {
  /* width: 80%; */
  height: 4rem;
  background: #fafafa;

  border-radius: 0.2rem;
  /* top: -2rem; */
  /* z-index: 999; */
  margin: 0 auto;
  /* margin: 0rem 3rem 0rem 3rem; */
  /* background: red; */
}
.box01 {
  color: #434343;
  position: relative;
  display: flex;
  padding: 0.8rem 0rem 0rem 0rem;
}
.box01 input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  width: 24.7rem;
  height: 2.5rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.1rem 0.1rem rgba(193, 144, 144, 0.1);
  margin-left: 2rem;
  border: none;
  background: #ffffff;
}
.button_style {
  width: 4rem;
  height: 2.5rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
  background: #fe9400;
  color: white;
  line-height: 2.5rem;
  font-size: 1.5em;
  padding: 0rem 0rem 0rem 1rem;
  margin-right: 2rem;
}
.iconstyle {
  display: inline-block;
  position: absolute;
  margin-top: 0.7rem;
  left: 24.7rem;
  z-index: 2;
}
</style>